<template>
  <div class="pay">
    <div class="erwei">
      <img :src="payImg" alt="" width="150px" height="150px">
      <div class="payIcon">
              <svg class="icon" aria-hidden="true" width="28px" height='25px'>
        <use xlink:href="#icon-wechat_pay 
 "></use>
       
      </svg>
       <span>请使用微信进行支付</span>
      </div>
    </div>
    <el-descriptions title="订单详情">
      <el-descriptions-item label="订单号">kooriookami</el-descriptions-item>
      <el-descriptions-item label="创建时间">18100000000</el-descriptions-item>
      <el-descriptions-item label="产品名称">苏州市</el-descriptions-item>
      <el-descriptions-item label="商品描述"> </el-descriptions-item>
      <el-descriptions-item label="购买数量"> </el-descriptions-item>

      <el-descriptions-item label="购买用户"> 1188 号</el-descriptions-item>
      <el-descriptions-item label="手机号"> 1188 号</el-descriptions-item>
    </el-descriptions>
  </div>
</template>


<script>
        // 首先要获取订单id
        import {mapState} from 'vuex'
        // 引入生成二维码插件
        import qrCode from 'qrcode'

        // 引入查询支付状态api
        import * as payApi from '@/api/pay'

        export default {
            data(){
                return {
                    
                    // 经过处理生成的二维码图片
                    payImg:''
                }
            },

            computed:{
                ...mapState('preOrder',['order_id']),
                ...mapState('preOrder',['code_url'])
            },


            mounted(){
          
            //    console.log(this.code_url);
            //    console.log(this.order_id);
                // 生成二维码
                qrCode.toDataURL(this.code_url,(err,img)=>{
                    this.payImg = img
                })





                // 轮询，查询支付状态
                // 轮询需要设置轮询时间
                this.queryPayStatusInterval = setInterval(() => {
                   payApi.queryPay(this.order_id)
                   .then(res => {
                    //    console.log(res);
                        if(res.data.state){
                            // 跳转到支付成功这个页面
                            this.$router.push({name:"home-PayMent-PaySuccess"})
                        }
                   })
                },10000)
            },

            // 组件即将销毁时清除定时器
            beforeDestroy(){
                clearInterval(this.queryPayStatusInterval )
            }
        }
</script>




<style scoped lang='less'>
.el-descriptions__title {
  line-height: 50px;
}

.erwei svg{
    vertical-align: middle;
}
.erwei span{
    vertical-align: middle;
}
.erwei{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>